const webpack = require("webpack")
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const ThemeColorReplacer = require('webpack-theme-color-replacer')
const forElementUI = require('webpack-theme-color-replacer/forElementUI')
const timeStamp = new Date().getTime()

// 拼接路径
const resolve = dir => require('path').join(__dirname, dir)

// 增加环境变量
process.env.VUE_APP_VERSION = require('./package.json').version
process.env.VUE_APP_BUILD_TIME = require('dayjs')().format('YYYY-M-D HH:mm:ss')

// 基础路径 注意发布之前要先修改这里
const publicPath = process.env.VUE_APP_PUBLIC_PATH || './'

// 多页配置，默认未开启
const pages = undefined

// 参考官网：https://cli.vuejs.org/zh/config/#devserver
module.exports = {
  // 项目部署的基础路径,项目的基础路径前缀
  publicPath: publicPath,
  // 打包输出路径：将构建好的文件输出到哪里
  outputDir: './dist',
  // eslint-loader 是否在保存的时候检查
  // 安装@vue/cli-plugin-eslint后生效
  lintOnSave: true,
  // 配置 webpack-dev-server 行为
  devServer: {
    // 关闭 host check，方便使用 ngrok 之类的内网转发工具
    disableHostCheck: process.env.NODE_ENV === 'development',
    // devServer启动且第一次构建完成时，是否自动打开浏览器网页
    open: true,
    // 开发模式监听主机地址
    host: '0.0.0.0',
    // 开发模式监听主机端口
    port: 8070,
    // 配置是否是https
    https: false,
    // 启动热更新
    hotOnly: true,
    // 配置代理，处理多个跨域
    proxy: {
      '/auth': {
        target: 'https://developer.dondown.com:4455/auth',
        changeOrigin: true,
        pathRewrite:{
          '/auth(.*)': '$1',
        }
      },
      '/zhgd': {
        target: 'https://developer.dondown.com:4455/code',
        changeOrigin: true,
        pathRewrite:{
          '/zhgd(.*)': '$1',
        }
      },
      '/media': {
        target: 'http://localhost:180/media',
        changeOrigin: true,
        pathRewrite:{
          '/media(.*)': '$1',
        }
      }
    },
    // 让浏览器 overlay 同时显示警告和错误
    overlay: {
      warnings: true,
      errors: true
    },
    before: (app) => { }
  },
  // css相关配置
  css: {
    // 为预处理器的 loader 传递自定义选项
    loaderOptions: {
      // 设置 scss 公用变量文件:这里的选项会传递给 sass-loader
      sass: {
        prependData: '@import \'~@/assets/style/public.scss\';'
      }
    },
    // 打包环境下重命名增加环境变量+时间戳css文件
    extract: process.env.NODE_ENV === 'development' ? false : {
      filename: `css/[name].${process.env.NODE_ENV}.${timeStamp}.css`,
      chunkFilename: `css/[name].${process.env.NODE_ENV}.${timeStamp}.css`
    },
     // 编译后css与源码映射,查看CSS属于哪个css文件
    sourceMap: true
  },
  // multi-page 模式下构建应用
  pages,
  // Webpack相关配置
  configureWebpack: config => {
    const configNew = {}
    // 生产环境打包配置
    if (process.env.NODE_ENV === 'production') {
      configNew.plugins = [
        // gzip
        new CompressionWebpackPlugin({
          // 压缩算法
          algorithm: 'gzip',
          // 压缩有的资产名
          filename: '[path].gz[query]',
          // 所有匹配此{RegExp}的资产都会被处理
          test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
          // 只压缩大于此大小的资产,这里为10k
          threshold: 10240,
          // 只有压缩比好于这个比率的资产才能被处理
          minRatio: 0.8,
          // 是否删除原始资产
          deleteOriginalAssets: false
        })
      ],

      // 打包文件大小配置
      config["performance"] = {
        "maxEntrypointSize": 10000000,
        "maxAssetSize": 30000000
      }

      // js文件名增加时间戳，防止新版本生成的hash文件同名导致浏览器取的缓存文件，防止打包js不在js文件夹下
      config.output.filename = `js/[name].${process.env.NODE_ENV}.${timeStamp}.js`
      config.output.chunkFilename = `js/[name].${process.env.NODE_ENV}.${timeStamp}.js`
    }
    return configNew
  },
  // 对内部的webpack进行更细粒度的修改
  chainWebpack: config => {
    // webWorker 配置
    config.module
          .rule("worker")
          .test(/\.worker\.js$/)
          .use("worker-loader")
          .loader("worker-loader")
          .options({
            inline: "fallback"
          });
    config.module.rule("js").exclude.add(/\.worker\.js$/);
    /**
     * 删除懒加载模块的 prefetch preload，降低带宽压力
     * 而且预渲染时生成的 prefetch 标签是 modern 版本的，低版本浏览器是不需要的
     */
    config.plugins
          .delete('prefetch')
          .delete('preload')
    // 修复热更新失效
    config.resolve
          .symlinks(true)
    // 动态主题切换
    config
          .plugin('theme-color-replacer')
          // 生成仅包含颜色的替换样式（主题色等）
          .use(ThemeColorReplacer, [{
            fileName: 'css/theme-colors.[contenthash:8].css',
            // Element-ui主色系列
            matchColors: [
              ...forElementUI.getElementUISeries(process.env.VUE_APP_ELEMENT_COLOR)
            ],
            externalCssFiles: ['./node_modules/element-ui/lib/theme-chalk/index.css'],
            changeSelector: forElementUI.changeSelector
          }])
    // 开发环境 sourcemap 不包含列信息
    config
        .when(process.env.NODE_ENV === 'development',
          // 把cheap-source-map 改成 source-map 就是调试模式
          config => config.devtool('cheap-source-map')
        )
    // 设置svg,使支持svg打包
    const svgRule = config.module.rule('svg')
    // 先把原svg的配置清除
    svgRule.uses.clear()
    // 加载svg图片
    svgRule
        .include
        .add(resolve('src/assets/icons/icon-svg'))
        .end()
        .use('svg-sprite-loader')
        .loader('svg-sprite-loader')
        .options({
          symbolId: 'icon-[name]'
        })
        .end()
    // image exclude
    const imagesRule = config.module.rule('images')
    imagesRule
        .test(/\.(png|jpe?g|gif|webp|svg)(\?.*)?$/)
        .exclude
        .add(resolve('src/assets/icons/icon-svg'))
        .end()
    // 重新设置 alias
    config.resolve.alias
        .set('@api', resolve('src/api'))
        .set('@views', resolve('src/views'))
    // 分析工具
    if (process.env.npm_config_report) {
      config
        .plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
    }
  },
  // 不输出 map 文件
  productionSourceMap: false,
  // 传递任何第三方插件选项
  pluginOptions: {
  },
}
